<template>
  <div>
    <a-row>
      <a-col>
        <a-input placeholder="请输入问题" class="w-150 mr-20" v-model="questiontitle"></a-input>
        <a-select allowClear class="w-150 mr-20" v-model="formType" placeholder="请选择类型">
          <a-select-option v-for="item in typeList" :key="item.id" :value="item.id">
            {{ item && item.name }}
          </a-select-option>
        </a-select>
        <a-button type="primary" style="margin-left: 20px;" @click="loginMethod">查询</a-button>
        <a-button type="primary" style="margin-left: 20px;" @click="addUser">新增</a-button>
      </a-col>
    </a-row>
    <a-table
      :loading="isLoading"
      :columns="columns"
      :data-source="dataList"
      style="padding: 40px;"
      bordered
      :rowKey="
        (record, index) => {
          return index;
        }
      "
    >
      <template slot="title">
        用户信息
      </template>
      <span slot="type" slot-scope="text, record">
        <span>{{ getType(record) }}</span>
      </span>
      <span slot="operate" slot-scope="text, record">
        <a-button type="primary" @click="updateUser(record)" class="mr-20">修改</a-button>
        <a-button type="danger" @click="delUser(record)">删除</a-button>
      </span>
    </a-table>

    <a-modal
      :title="type === 'add' ? '新增问题' : '修改问题' "
      :visible="isShow"
      width="80%"
      :confirm-loading="confirmLoading"
      :footer="null"
      @cancel="handleCancel"
    >
    <a-form-model :model="form" :label-col="labelCol" :wrapper-col="wrapperCol" ref="ruleForm" :rules="rules">
      <a-form-model-item label="问题" prop="questiontitle">
        <a-input v-model="form.questiontitle" placeholder="请输入问题"/>
      </a-form-model-item>
      <a-form-model-item label="类别" prop="type">
        <a-select v-model="form.type" placeholder="请选择类别">
          <a-select-option :value="item.id" v-for="item in typeList" :key=item.id>
            {{ item && item.name }}
          </a-select-option>
        </a-select>
      </a-form-model-item>

      <a-form-model-item label="答案" prop="answer">
        <a-textarea v-model="form.answer" placeholder="请输入答案" :auto-size="{ minRows: 6 }"/>
      </a-form-model-item>

      <a-form-model-item label="说明">
        <a-textarea v-model="form.info" placeholder="请输入说明" :auto-size="{ minRows: 6 }"/>
      </a-form-model-item>

      <a-form-model-item :wrapper-col="{ offset: 10 }">
        <a-button type="primary" @click="handleOk">
          确定
        </a-button>
        <a-button style="margin-left: 10px;" @click="handleCancel">
          取消
        </a-button>
      </a-form-model-item>

    </a-form-model>
    </a-modal>
  </div>
</template>
<script>
import {
  addFrontEndQuestions,
  delFrontEndQuestions,
  getAllType,
  searchFrontEndQuestions,
  updateFrontEndQuestions
} from '@/api/FrontEndQuestions.js'
export default {
  data () {
    return {
      questiontitle: '',
      formType: undefined,
      labelCol: { span: 2 },
      wrapperCol: { span: 21 },
      form: {
        questiontitle: '',
        answer: undefined,
        type: undefined,
        info: undefined
      },
      rules: {
        questiontitle: [
          { required: true, message: '请输入问题', trigger: 'blur' },
          { max: 500, message: '长度最多500字', trigger: 'blur' }
        ],
        answer: [
          { required: true, message: '请输入答案', trigger: 'blur' },
          { max: 500, message: '长度最多5000字', trigger: 'blur' }
        ],
        type: [
          { required: true, message: '请选择类型', trigger: 'blur' }
        ]
      },

      type: [],
      typeList: [],
      confirmLoading: false,
      selectObj: {
        id: '',
        name: ''
      },
      isShow: false,
      isLoading: false,
      dataList: [],
      userName: '',
      columns: [
        {
          dataIndex: 'id',
          title: '编号',
          slots: { title: 'id' },
          scopedSlots: { customRender: 'id' }
        },
        {
          dataIndex: 'type',
          title: '类型',
          slots: { title: 'type' },
          scopedSlots: { customRender: 'type' }
        },
        {
          dataIndex: 'questiontitle',
          title: '问题',
          slots: { title: 'questiontitle' },
          scopedSlots: { customRender: 'questiontitle' }
        },
        {
          dataIndex: 'answer',
          title: '答案',
          slots: { title: 'answer' },
          scopedSlots: { customRender: 'answer' }
        },
        {
          dataIndex: 'info',
          title: '说明',
          slots: { title: 'info' },
          scopedSlots: { customRender: 'info' }
        },
        {
          dataIndex: 'operate',
          title: '操作',
          slots: { title: 'operate' },
          scopedSlots: { customRender: 'operate' }
        }
      ]
    }
  },
  mounted () {
    this.getAllTypeMethod()
    this.loginMethod()
  },
  methods: {
    getType (obj) {
      const index = this.typeList.findIndex(item => item.id === obj.type)
      return this.typeList[index].name
    },
    async loginMethod () {
      this.isLoading = true
      const params = {
        questiontitle: this.questiontitle,
        type: this.formType
      }
      const res = await searchFrontEndQuestions(params)
      this.dataList = res.data.result
      this.isLoading = false
    },
    delUser (item) {
      const _this = this
      this.$confirm({
        title: '确认',
        content: '确定删除？',
        okText: '确认',
        cancelText: '取消',
        onOk: async () => {
          await delFrontEndQuestions({ id: item.id })
          _this.loginMethod()
        }
      })
    },
    addUser () {
      this.isShow = true
      this.type = 'add'
    },
    updateUser (obj) {
      this.selectObj = obj
      this.form.questiontitle = obj.questiontitle
      this.form.answer = obj.answer
      this.form.type = obj.type
      this.form.info = obj.info
      this.isShow = true
      this.type = 'update'
    },
    changename (obj) {
      this.selectObj = obj
      this.isShow = true
    },
    async handleOk () {
      this.$refs.ruleForm.validate(async valid => {
        if (valid) {
          this.confirmLoading = true

          const params = {
            questiontitle: this.form.questiontitle,
            answer: this.form.answer,
            info: this.form.info,
            type: this.form.type
          }
          // return
          if (this.type === 'add') {
            await addFrontEndQuestions(params)
          } else {
            params.id = this.selectObj.id
            await updateFrontEndQuestions(params)
          }
          this.selectObj.name = ''
          this.loginMethod()
          this.$refs.ruleForm.resetFields()
          this.form.info = ''
          this.isShow = false
          this.confirmLoading = false
        } else {
          return false
        }
      })
    },
    handleCancel () {
      this.$refs.ruleForm.resetFields()
      this.form.info = ''
      this.isShow = false
    },
    async getAllTypeMethod () {
      const res = await getAllType()
      this.typeList = res.data.result
    }

  }
}
</script>
